<template>
	<view class="wrap">
		<view>
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="v,k in info.productSwipe" :key="k">
					<img :src="v.productswipeImg" class="swipe" />
				</van-swipe-item>
			</van-swipe>
		</view>
		<view class="info">
			<text class="price">￥{{info.productPrice}}</text>
			<text class="name">{{info.productName}}</text>
			<text class="descr">{{info.productDetails}}</text>
		</view>
		<view class="descrinfo">
			<van-divider :style="{ color: 'grey', borderColor: 'grey', padding: '0 16px' }">商品详情</van-divider>
			<img :src="v.productdescrImg" v-for="v in info.productDescr">
		</view>
		<van-action-bar>
			<van-action-bar-icon icon="cart-o" text="购物车" @click="tocart" />
			<van-action-bar-icon icon="home-o" text="首页" @click="tohome" />
			<van-action-bar-button color="#fff3e0" type="warning" text="加入购物车" style="color: #fe9b23;" @click="cart" />
			<van-action-bar-button color="#fe9b23" type="danger" text="立即购买" @click="buy" />
		</van-action-bar>
		<van-popup v-model:show="show" position="bottom" :style="{ height: '70%' }" closeable
			@click-close-icon="onClickCloseIcon">
			<view class="top">
				<img :src="info.productImg" alt="">
				<view class="top1">
					<text class="name1">{{info.productName}}</text>
					<text class="price1">￥{{info.productPrice}}</text>
				</view>
			</view>
			<view class="middle">
				<p>类型</p>
				<view class="type">
					<text>{{info.productName}}2kg</text>
				</view>
			</view>
			<view class="bottom">
				<p>数量</p>
				<van-stepper v-model="num" min="1" max="10" />
			</view>
			<view class="btn">
				<van-button round color="#ff7976" style="width: 92vw;height: 36px;font-size: 36rpx;"
					@click="addcart(info.productId,num)">{{showtext}}</van-button>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
	import $http from '../../request/index.js'
	import {
		showToast
	} from 'vant';
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	let num = ref(1)
	let info = ref('')
	// 弹出层
	const show = ref(false);
	let showtext = ref('加入购物车')
	const onClickOverlay = () => {
		showToast('click-overlay');
	};
	const onClickCloseIcon = () => {
		showToast('click-close-icon');
	};


	onLoad((options) => { //接收上个页面传过来的id
		console.log('接收传值：', options)
		$http.get(`/shopping/${options.id}`).then(res => { //商品详情
			console.log(res.data)
			info.value = res.data
		})
		// $http.get(`/shopping/id`).then(res => { //商品详情mock
		// 	console.log(res.data)
		// 	info.value = res.data
		// })
	});

	function tocart() { //去购物车
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}

	function tohome() { //去主页
		uni.switchTab({
			url: '/pages/home/home'
		})
	}

	function addcart(id, num) { //判断是加入购物车 还是 立即购买
		// id，num，没有num就默认数量加1
		if (showtext.value == '加入购物车') { //如果是加入购物车
			console.log('cart', id, num)
			$http.post('/car/addCarProduct', {
				carProduct: id,
				carCount: num
			}).then(res => {
				console.log(res)
				let {
					msg,
					code
				} = res
				show.value = false //让弹出框消失
				if (!code) {
					showSuccessToast(msg)
				} else {
					showFailToast(msg)
				}
			})

		} else { //如果是立即购买
			console.log('buy')
			uni.navigateTo({
				url: `/pages/goodsettle/goodsettle?id=${id}&num=${num}`
			})
		}
	}

	function buy() { //点击立即购买
		show.value = true
		showtext.value = '立即购买'
	}

	function cart() { //点击加入购物车
		show.value = true
		showtext.value = '加入购物车'
	}
</script>

<style scoped>
	.van-popup {
		position: relative;
	}

	.type text {
		font-size: 26rpx;
		margin-left: 30rpx;
	}

	.btn {
		width: 100vw;
		position: absolute;
		left: 0;
		bottom: 0;
		border-top: 1px solid gray;
		height: 50px;
		padding: 14rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.middle,
	.bottom {
		width: 100vw;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.middle p,
	.bottom p {
		margin-bottom: 20rpx;
	}

	.middle text {
		color: #Fe9b23;
	}

	.type {
		width: 100%;
		border: 1px solid #Fe9b23;
		border-radius: 50rpx;
		padding: 8rpx;
		box-sizing: border-box;
	}

	.top {
		width: 100vw;
		height: 240rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.top1 {
		width: 300rpx;
		height: 160rpx;
		margin-left: 30rpx;
		position: relative;
	}

	.name1 {
		width: 100%;
	}

	.price1 {
		width: 100%;
		color: #Fe9b23;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.top img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
	}

	.van-divider {
		height: 60rpx;
		margin: 0;
	}

	.descrinfo img {
		width: 100vw;
	}

	.descrinfo {
		text-align: center;
	}

	.wrap {
		width: 100vw;
		height: calc(100vh - 44px);
		overflow-y: scroll;
		padding-bottom: 50px;
		background-color: #f7f7f7;
	}

	.price {
		font-size: 44rpx;
		color: #Fe9b23;
		font-weight: bolder;
	}

	.name {
		font-weight: bolder;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.descr {
		font-size: 28rpx;
		color: gray;
	}

	.info {
		width: 100vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.info text {
		width: 90vw;
	}

	.swipe {
		width: 100vw;
		height: 600rpx;
	}
</style>